---
import '../styles/global.css'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'

const pageTitle = "关于";

const identity = {
  firstName: "莎拉",
  country: "加拿大",
  occupation: "技术撰稿人",
  hobbies: ["摄影", "观鸟", "棒球"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
// const finished = false;
const finished = true;
const goal = 3;

const skColor = "navy";
const skFontWeight = "lighter";
---

<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
    <style define:vars={{skColor, skFontWeight}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .sk {
        /* color: brown; */
        color: var(--skColor);
        /* font-weight: bold; */
        font-weight: var(--skFontWeight);
      }
    </style>
	</head>
  <body>
    <!-- <a href="/">首页</a>
    <a href="/blog/">博客</a> -->
    <Header />
    <h1>我的 Astro 网站</h1>
    <h1>{pageTitle}</h1>
    <h2>……和我的新 Astro 网站！</h2>
  
    <p>我正在学习 Astro 的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！</p>
  
    <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p>

    <p>以下是关于我的几个事实：</p>
    <ul>
      <li>我的名字是{identity.firstName}.</li>
      <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
      {identity.hobbies.length >= 2 &&
        <li>我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}</li>
      }
    </ul>
    <p>我的技能是：</p>
    <ul>
      {skills.map((skill, index) => <li class="sk">{index}. {skill}</li>)}
    </ul>
    {happy && <p>我非常乐意学习 Astro！</p>}
    {finished && <p>我完成了这节教程！</p>}
    {goal === 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}

    <Footer />
  </body>
</html>
